import React, { useEffect, useState } from 'react'
import useGetTableData from '@/hooks/useGetTableData'
import { getAllProductColorGroup, getProductColorPageList } from '@/api/goods'
import { useForm } from 'antd/es/form/Form'
import PageContainer from '@/components/PageContainer'
import { useDevColorColumns } from '../columns'
import { ITableData } from '../types'
import CustomTable from '@/components/CustomTable'
import { SearchForm } from '@/components/CustomForm'
import { STATUSBANDOPTIONS } from '@/constant'
import './Color.less'
const Index: React.FC = () => {
  const [form] = useForm()
  const [colorGroupIdOptions, setcolorGroupIdOptions] = useState<IOptionItem[]>([])
  const [tableData, settableData] = useState<ITableData[]>([])
  useEffect(() => {
    getAllColorGroup()
  }, [])
  const getAllColorGroup = async () => {
    const res = await getAllProductColorGroup<{
      colorGroupName: string
      colorGroupId: string
      colorGroupCode: string
    }>()
    if (res.code === 200) {
      const data = res?.data?.map((item) => {
        return {
          label: item.colorGroupName,
          value: item.colorGroupId,
        }
      })
      setcolorGroupIdOptions(data)
    }
  }
  const { tableProps, params, setParams, search, reset } = useGetTableData<ITableData>(getProductColorPageList, {
    form: form,
    defaultFieldsParams: {
      enableStatus: 1,
    },
    immediatelySend: false,
  })
  useEffect(() => {
    search({
      ...params,
      enableStatus: 1,
    })
  }, [])
  useEffect(() => {
    settableData(tableProps.dataSource)
  }, [tableProps.dataSource])
  const reLoadPage = () => {
    search(params)
  }
  return (
    <PageContainer className="goods_colordev_page">
      <SearchForm
        className="colordevDom"
        params={params}
        form={form}
        searchConfig={[
          {
            name: 'colorGroupId',
            label: '颜色组',
            type: 'Select',
            option: colorGroupIdOptions,
            placeholder: '请选择颜色组',
            config: {
              showSearch: true,
              filterOption: true,
              optionFilterProp: 'label',
            },
          },
          { label: '颜色', name: 'colorGroupSearchName', type: 'Input', placeholder: '请输入颜色编码或颜色名称' },
          { label: '状态', name: 'enableStatus', type: 'Select', option: STATUSBANDOPTIONS },
        ]}
        onFinish={(vals: any) => {
          search({
            ...vals,
          })
        }}
        onReset={() => {
          reset()
        }}
      ></SearchForm>
      <CustomTable
        bordered
        columns={useDevColorColumns({ tableData, settableData, reLoadPage })}
        {...tableProps}
        rowKey={(rows) => rows.colorDetailId}
        extraHeight={28}
        isScrollY
        filterDomClassName="colordevDom"
      />
    </PageContainer>
  )
}

export default Index
